<template>
  <div class="app-container" style="">
    <el-row style="margin-bottom:10px;">
      <div style="height: 40px;background-color: white;">
        <el-col :span="24">
          <el-tabs style="height:30px;width:100%;" :value="initTabName" @tab-click="getDataForAll">
            <el-tab-pane label="公司数据" name="org" v-if="orgTabView"></el-tab-pane>
            <el-tab-pane label="我负责的" name="inChargeMe"></el-tab-pane>
            <el-tab-pane label="我参与的" name="participate"></el-tab-pane>
            <!-- <el-tab-pane name="myNeedToDeal">
              <span slot="label">
                <el-badge :value="totalCount" :max="99" class="item">
                  我的待办
                </el-badge>
              </span>
              <myApprovalList ref="myApprovalListForIndex" v-if="isMyApprovalList"></myApprovalList>
            </el-tab-pane> -->
            <el-tab-pane name="dataDashboard" :lazy="true">
              <span slot="label"> 数据看板 </span>
              <data-dashboard></data-dashboard>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <!-- <el-col :span="6">
          <el-row type="flex" align="middle" justify="space-between">
            <el-button size="small" type="primary">工时确认</el-button>
            <el-button size="small" type="primary">公式填报</el-button>
            <el-button size="small" type="primary">新建项目</el-button>
          </el-row>

        </el-col> -->
      </div>
    </el-row>
    <el-row v-show="!isMyApprovalList" style="padding:0 1px 10px 8px;">
      <!-- 超期信息 -->
      <el-col :span="12">
        <div style="background:white; height: 120px; border-radius: 10px;">
          <el-col>
            <div class="projectIndexTitle">
              <div class="projectIndexSquare"></div>
              <label class="projectIndexInfo">信息概览</label>
            </div>
            <!-- <div class="grid-content bg-purple" style="font-size: 14px">&emsp;信息概览</div> -->
          </el-col>
          <el-col>
            <el-col :span="24">
              <exceptionOverview ref="exception"></exceptionOverview>
            </el-col>
          </el-col>
        </div>
        <!-- 工时确认 -->
        <el-row style="">
          <!-- 工时确认 -->
          <el-col :span="24">
            <taskSoonOverdue ref="taskSoonOverdue"></taskSoonOverdue>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <!-- 最新创建和最近完成 -->
        <el-col :span="24" style="padding:0 4px 0 10px;">
          <recentlyCreateAndComplete ref="recentlyCreateAndComplete"></recentlyCreateAndComplete>
        </el-col>
      </el-col>
    </el-row>
    <el-row v-show="!isMyApprovalList" style="margin-bottom:5px;margin-left:8px">
      <el-col :span="12">
        <el-row>
          <projectTypeStatistics ref="typeStatistics" :dataPermission="dataPermissionFlag"></projectTypeStatistics>
        </el-row>
      </el-col>
      <el-col :span="12" :offset="0" style="padding:0 5px 0 10px;">
        <el-row>
          <projectStatus ref="statusStatistics" :dataPermission="dataPermissionFlag"></projectStatus>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import exceptionOverview from './components/exceptionOverview'
import taskSoonOverdue from './components/taskSoonOverdue'
import recentlyCreateAndComplete from './components/recentlyCreateAndComplete'
import projectTypeStatistics from './components/projectTypeStatistics'
import dataDashboard from './components/dataDashboard'
import projectStatus from './components/projectStatus'
import { getProjectpInfoSurvey, getProjectOverallInfo } from '../../../api/projectIndexInfo'
import { getAction, deleteAction, putAction } from '@tapui/utils/http'
export default {
  name: 'mpmIndex',
  components: {
    exceptionOverview,
    taskSoonOverdue,
    recentlyCreateAndComplete,
    projectTypeStatistics,
    projectStatus,
    dataDashboard
  },
  // mixins: [mixin_list],
  data() {
    return {
      dataPermissionFlag: 'org', // 公司数据、我参与的、我负责的标志
      initTabName: '',
      yearForManHour: '',
      isMyApprovalList: false,
      myApprovalListNum: 0,
      orgTabView: false,
      url: {
        getIndexEhartsInfo: '/mpm/mpmIndex/getIndexEhartsInfo',
        getIndexPermission: '/mpm/mpmIndex/getIndexPermission'
      }
    }
  },

  methods: {
    // tab切换重新加载数据
    getDataForAll(param) {
      this.dataPermissionFlag = param.name
      if (param.name !== 'myNeedToDeal' && param.name !== 'dataDashboard') {
        this.isMyApprovalList = false
        this.$refs.exception.getOverdueInfo({ dataPermissionFlag: this.dataPermissionFlag })
        this.$refs.taskSoonOverdue.loadData({ dataPermissionFlag: this.dataPermissionFlag })
        this.$refs.recentlyCreateAndComplete.loadData({ dataPermissionFlag: this.dataPermissionFlag })
        // this.getProjectSurveyInfo(param.name)
        this.getProjectOverallInfo(param.name)

        // this.$refs.recentlyCreateAndComplete.dataPermissionFlagForRecentlyProject = param.name
        // this.$refs.recentlyCreateAndComplete.loadData()
        // this.getRecentlyCreatProjet(param.name)

        // this.$refs.taskSoonOverdue.dataPermissionFlagForRecentlyProject = param.name
        // this.$refs.taskSoonOverdue.loadData()
        // this.loadTaskSoonOverdue(param.name)
      } else {
        this.isMyApprovalList = true
      }
    },
    // 获取项目状态和项目类型饼图数据
    getProjectOverallInfo(paramData) {
      getAction(this.url.getIndexEhartsInfo, { dataPermissionFlag: paramData }).then((res) => {
        if (res.statusCode === 200) {
          // 渲染项目类型饼图
          this.$refs.typeStatistics.seriesDataType = res.result.projectLevelStatisticInfo
          this.$refs.typeStatistics.setLineOptionForType()
          // 渲染项目状态饼图
          this.$refs.statusStatistics.statusSeriesData = res.result.projectStateStatisticInfo
          this.$refs.statusStatistics.setLineOptionForStatus()
        }
      })
    },
    // 添加 iframe默认调用方法 防止报错
    open() {}
  },
  created() {},
  mounted() {
    // this.getProjectSurveyInfo(this.dataPermissionFlag)
    // this.getProjectOverallInfo(this.dataPermissionFlag)
    // this.loadTaskSoonOverdue(this.dataPermissionFlag)
    // this.getRecentlyCreatProjet()

    getAction(this.url.getIndexPermission).then((res) => {
      // 判断是否有org的权限
      if (res.result) {
        this.orgTabView = true
        this.getDataForAll({ name: 'org' })
        this.initTabName = 'org'
      } else {
        this.orgTabView = false
        this.getDataForAll({ name: 'inChargeMe' })
        this.initTabName = 'inChargeMe'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px 5px 5px 0px;
  margin: 0px;
  background: rgb(238, 238, 238);
}
.el-scrollbar {
  background: rgb(238, 238, 238);
}
.app-container >>> .el-pagination__total {
  margin: 0px;
}
.app-container >>> .el-pagination__jump {
  margin: 0px;
}
.app-container >>> .el-pagination__sizes {
  margin: 0px;
}
.app-container >>> .el-pager li {
  margin: 0px;
}
.app-container >>> .el-pagination .el-select .el-input {
  width: 85px;
}
.app-container >>> .el-badge__content.is-fixed {
  top: 10px;
  right: 6px;
}
/* .app-container >>> .el-tabs__header {
  margin: 0 0 5px;
} */
.app-container >>> .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  min-width: 20px;
}
.app-container >>> .el-pagination.is-background .btn-prev {
  min-width: 20px;
}
.grid-content {
  line-height: 35px;
  border-radius: 4px;
  height: 35px;
}
.bg-purple {
  font-size: 16px;
  border-bottom: 1px solid #d3d3d3;
  /* margin-top: 1rem; */
}
/* .el-row {
  margin-bottom: 5px; */
/* background-color: white; */
/* } */
.el-button {
  margin-right: 20px;
}
.el-button {
  margin-top: 3px;
}
.is-fixed {
  top: 10px;
}
/deep/ .el-tabs__nav {
  margin-left: 16px;
}
/deep/ .el-tabs__header {
  margin: 0 0 10px;
}
/deep/ .el-tabs__nav-wrap::after {
  display: none;
}
</style>
